<template>
  <div>
    <!-- <div class="background">
        <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div> -->
    <!--hoverMode:粒子特效:驱散,泡沫,点击增加-->
    <!--  clickMode: -->
    <div class="particles-js">
    <vue-particles
        color="#FFF"
        :particleOpacity="0.8"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#0D0D0D"
        :linesWidth="0.6"
        :lineLinked="true"
        :lineOpacity="0.2"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="remove"
        class="lizi"
      >
      </vue-particles>
    <router-view></router-view>
  </div>
    <div id="div1">
    <el-form :model="userInfo" class="login-form">
      <el-form-item label="用户名:">
        <el-input
          type="text"
          v-model="userInfo.adminname"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="密码:">
        <el-input
          type="password"
          v-model="userInfo.password"
          placeholder="请输入密码"
        />
      </el-form-item>
      <!-- <el-form-item label="验证码:">
                <el-col :span="8">
                  <el-input type="text" v-model="userInfo.verifyCode" placeholder="验证码"  />
                </el-col>
                  <el-image   style="width: 50px; height: 30px"   :src="imageUrl"  ></el-image>
            </el-form-item> -->
      <el-form-item>
        <el-button  round class="submitBtn" @click="login"
          >登录</el-button
        >
        <el-button  round class="submitBtn" @click="resetForm('userInfo')">重置</el-button>
      </el-form-item>
      <hr />
      <p>还没有账号，马上去<span class="to" @click="regist">注册</span></p>
    </el-form>
    </div>
    <!-- 模态框 -->

    <div></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgSrc:require('.././assets/2.jpg'),
      userInfo: {
        adminname: "",
        password: "",
      },
    };
  },
  methods: {
    resetForm(userInfo) {
        this.$refs.userInfo.resetFields();
      },
    login: function () {
      //alert("login successful");
      this.$axios
        .post("/login", {
          adminname: this.userInfo.adminname,
          password: this.userInfo.password,
        })
        .then((res) => {
          if (res.data.code == 200) {
            // alert(res.data.code);
            let token = res.data.info.token;
            // 将返回的用户信息和令牌写入localStorage
            localStorage.setItem("Authentication", token);
            localStorage.setItem("adminname", this.userInfo.adminname);
            this.$router.push("/admin");
          }else{
            this.$message(res.data.message);
          }
        })
        .catch((error) => {});
    },
    regist: function () {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
.background{

    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
}
#div1{
 
   position: absolute;/*--絕對定位--*/
    top: 30%;
    left: 48%;
}
.login-form {
  margin: 20px auto;  
  width: 310px;
  background: #fffdfae7;
  box-shadow: 0 0 35px #b4bccccc;
  padding: 30px 30px 0 30px;
  border-radius: 25px;
}
.submitBtn {
  width: 45%;
}
.to {
  color: #67c23a;
  cursor: pointer;
}
.particles-js {
    background-image: url(.././assets/057.png);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
